<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="hander-tab">
			<view class="hander-text" style="display: flex;align-items: center;">
				<u-icon @click="back" name="arrow-left" color="#606266" size="28"></u-icon>
				<text>TA的主页</text>
			</view>
		</view>
		<!-- 用户资料 -->
		<view class="" style="margin: 30rpx;display: flex;">
			<image @click="previewuserpic(userinfo.user_pic)" :src="userinfo.user_pic" style="width: 250rpx;height: 250rpx;border-radius: 10rpx 50rpx 50rpx 50rpx;margin-right: 50rpx;" mode=""></image>
			<view class="" style="width: 400rpx;">
				<view style="height: 130rpx;display: flex;flex-direction: column;">
				<view class="" style="font-size: 50rpx;">
					{{userinfo.nickname}}
				</view>
				<text class="" style="font-size: 30rpx;color: #a3a3a3;margin-left: 10rpx;">ID:{{userinfo.user_id}}</text>
				<view v-if="userinfo.rz_type==1" class="" style="display: flex;align-items: center;margin-top: 20rpx;">
					<image src="../../static/rz.png" style="width: 40rpx;height: 40rpx;margin-right: 5rpx;" mode=""></image>
					<text style="color: #007eff;">{{userinfo.rz_describe}}</text>
				</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;margin-top: 50rpx;">
					<view class="" style="display: flex;flex-direction: column;align-items: center;">
						<text style="font-size: 35rpx;font-weight: 700;">{{userinfo.follow_count}}</text>
						<text style="font-size: 35rpx;font-weight: 700;">关注</text>
					</view>
					<view class="" style="display: flex;flex-direction: column;align-items: center;">
						<text style="font-size: 35rpx;font-weight: 700;">{{userinfo.fans_count}}</text>
						<text style="font-size: 35rpx;font-weight: 700;">粉丝</text>
					</view>
					<view class="" style="display: flex;flex-direction: column;align-items: center;">
						<text style="font-size: 35rpx;font-weight: 700;">{{userinfo.like_count}}</text>
						<text style="font-size: 35rpx;font-weight: 700;">获赞</text>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="5" bgColor="#f0f3f5"></u-gap>
		<!-- ta的帖子 -->
		<xz-article :postdata="articlepost"></xz-article>
		<u-loadmore @loadmore="getpostsuser" :status="loading" loadingText="正在寻找这个世界上最后的角落" loadmoreText="下拉加载" nomoreText="这个世界太空旷了" loadingIcon="circle"></u-loadmore>
		<u-gap height="20" bgColor="#ffffff"></u-gap>
	</view>
</template>

<script>
	import xZarticle from "../../components/xz-article/xz-article.vue"
	export default {
		components: {
			xZarticle
		},
		data() {
			return {
				loading: 'loadmore',
				user_id:null,
				user_ids:null,
				articlepost:[],
				userinfo:{},
				pagetotal:10,
				pagesize:1,
			}
		},
		onLoad(option) {
			this.getuserinfo(option.user_id)
			this.user_ids=option.user_id
			setTimeout(res=>{
				this.getpost(option.user_id)
			},300)
			this.getuser()
		},
		onReachBottom(){
			this.getpostsuser()
		},
		methods: {
			//获取当前登录用户信息
			getuser(){
				uni.getStorage({
					key:'userinfo',
					success: (res) => {
						this.user_id=res.data.id
					}
				})
			},
			//获取用户文章
			getpost(id){
				if (!this.user_id)
				// console.log(this.user_id);
				return
				this.$http({
					url:'/api/getfollowarticle',
					data:{
						follow_user_id:id,
						fans_user_id:this.user_id,
						pagetotal:this.pagetotal,
						pagesize:this.pagesize,
					}
				}).then(res=>{
					console.log(res);
					if (res.status==0) {
						this.articlepost=res.results
						this.pagesize++
					} else{
						
					}
				})
			},
			//触底加载用户文章
			getpostsuser() {
				this.loading = 'loading'
				this.$http({
					url:'/api/getfollowarticle',
					data:{
						follow_user_id:this.user_ids,
						fans_user_id:this.user_id,
						pagetotal:this.pagetotal,
						pagesize:this.pagesize,
					}
				}).then(res=>{
					this.pagesize++
					this.articlepost.push(...res.results)
					setTimeout(res => {
						this.loading = 'loadmore'
					}, 500)
				}).catch(err=>{
					setTimeout(res => {
						this.loading = 'nomore'
					}, 500)
				})
			},
			//预览头像
			previewuserpic(e){
				uni.previewImage({
					urls:[e],
					current:0
				})
			},
			//获取用户信息
			getuserinfo(user_id){
				this.$http({
					url:'/api/commonuserinfo',
					data:{
						user_id:user_id
					}
				}).then(res=>{
					this.userinfo=res.data
					console.log(res);
				})
			},
			back(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	.hander-tab {
		position: sticky;
		z-index: 99;
		top: 0;
		display: flex;
		justify-content: space-between;
		/* #ifdef MP-WEIXIN */
		padding: 80rpx 20rpx 0rpx 20rpx;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		padding: 0 20rpx;
		/* #endif */
		height: 100rpx;
		align-items: center;
		background-color: #ffffff;
	}

	.hander-text {
		font-size: 40rpx;
	}
	.indicator {
		@include flex(row);
		justify-content: center;
	
		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;
	
			&--active {
				background-color: #ffffff;
			}
		}
	}
	.common-post {
		padding: 20rpx;
	}
	.common-user {
		display: flex;
	}
	.common-time {
		font-size: 24rpx;
		color: #a5a5a5;
	}
	
	.common-user .users {
		margin-left: 20rpx;
	}
	
	.common-username {
		display: flex;
		align-items: center;
	}
	
	.common-post-title {
		padding: 20rpx;
	}
	
	.common-post-todos {
		padding: 20rpx 20rpx 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.common-post-labe {
		font-size: 24rpx;
	}
	
	.common-post-todo {
		display: flex;
		align-items: center;
	}
	
	.common-post-eye {
		display: flex;
		align-items: center;
	}
	
	.topic {
		color: #595959;
		background-color: #f5f5f5;
		margin: 0 10rpx 0 0;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}
</style>